$(function(){
    /**初始化页面 需要配置本地服务器*/
    $.ajaxSetup ({
        cache: false //关闭AJAX相应的缓存
    });
    $("#main_body").load('../html/task/index.html');
    /**头部菜单切换 */
    $("#head_menu").off('click','a').on('click','a',function(){
        var url = $(this).data('url')
        $(this).addClass('active').siblings().removeClass('active');
        $("#main_body").load(url);
    })

    /**foot按钮切换 */
   $(".foot_modal").off('click','.footBtn').on('click','.footBtn',function(){
    $(this).addClass('active').siblings().removeClass('active');
   })

    /**环形进度 */
    var roundProgress = {
        element:null,
        maxVal:100,
        val:80,
        width:100,
        barWidth:20,
        color:'#19be6b',
        lightColor:'#b2eed0',
        _init:function(options){
            $.extend(true,this,options);
            this._render(options);
        },
        _render:function(options){
            var radio = this.val/this.maxVal;
            var style2 = '';//外圈
            var style3= '';//内圈
            var _width = this.width/2;
            var width = this.width;
            var style1="width:"+this.width+"px;height:"+this.width+"px;background:"+this.color;
            style2= "background:"+this.lightColor+";clip:rect(0,"+_width+"px,"+width+"px,0);";
            style3= "background:"+this.lightColor+";clip:rect(0,"+width+"px,"+width+"px,"+_width+"px);";
            if(radio<=0.5){
                deg = radio*360 + 'deg';
                style3+= "transform:rotate("+ deg + ");";
            }else{
                deg = (radio-0.5)*360 + 'deg';
                style2+= "transform:rotate("+ deg + ");";
                style3 = "background:"+this.color+";clip:rect(0,"+width+"px,"+width+"px,"+_width+"px);";
                style3+= "transform:rotate(0deg);";
                
            }
            var mask = "font-size:"+this.width/5+"px;width:"+(this.width-this.barWidth)+"px;height:"+(this.width-this.barWidth)+"px;color:"+this.color;
            var html = '<div class="circle-bar" style='+style1+'>';
            html+='<div class="left-circle-bar" style='+style2+'></div>'
            html+='<div class="right-circle-bar" style='+style3+'></div>'
            html+='<div class="mask" style='+mask+'><span>'+this.val+'/'+this.maxVal+'</span></div>';
            html+='</div>';
            $(this.element).html(html);
        }
    }
    $.fn.initProgress = function(options){
        var _obj = roundProgress;
        _obj.element = this;
        return _obj._init(options)
    }
});
